// 跳过父组件传值
import React,{useState,createContext,useContext} from "react";
// 创建上下文空间(provide,Consumer)
const NumContext =createContext()

// 子组件
function Child (props){
    const {num,setNum} =useContext(NumContext)

    return (
        // <NumContext.Consumer>
        //         {
            
        //           ({num,setNum})=>{
        //              return (
        //                  <>
        //                     <h2>{num}</h2>
        //                     <button onClick={()=>setNum(456)}>跳过父组件传值</button>
        //                  </>
        //              )                       
        //           }            
        //         }
        // </NumContext.Consumer>

        // 使用useContext后就不用上面那么麻烦了
        <>
            <h2>{num}</h2>
            <button onClick={()=>setNum(456)}>跳过父组件传值</button>
        </>
    )
}

function Father(props){
    return <Child/>
}
// 顶级组件
export default function App2(){
    const [num,setNum]= useState(123)
    return(
        <NumContext.Provider value={{num,setNum}}>
            <Father/>
        </NumContext.Provider>   

    ) 
}